<template>
    <quill-editor class="editor"
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import hljs from 'highlight.js'
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{ list: 'ordered' }, { list: 'bullet' }],
  ['blockquote', 'code-block'],
  ['image', 'link']
]
export default {
  name: 'Editor',
  components: {
    quillEditor
  },
  data () {
    return {
      uniqueId: 'uniqueId',
      content: '', // 富文本编辑器默认内容
      editorOption: {
        //  富文本编辑器配置
        modules: {
          toolbar: toolbarOptions,
          syntax: {
            highlight: text => {
              return hljs.highlightAuto(text).value // 这里就是代码高亮需要配置的地方
            }
          }
        },
        theme: 'snow',
        placeholder: '请输入正文'
      }
    }
  },
  computed: {
    // 当前富文本实例
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  },
  methods: {
    // 准备富文本编辑器
    onEditorReady () {},
    // 富文本编辑器 失去焦点事件
    onEditorBlur () {},
    // 富文本编辑器 获得焦点事件
    onEditorFocus () {},
    // 富文本编辑器 内容改变事件
    onEditorChange () {}
  }
}
</script>

<style>
.editor{
    margin-bottom: 40px;
    height: 100px;
}

/* 这里可以自定义样式以及安放的位置  */

</style>
